<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
    <title>Document</title>
    <style>
        body,html{
            height: 100%;
            padding: 10px;
            text-align: center;
        }
        #img_containter{
            border-radius: 10px;
            padding: 10px;
            background-color: rgb(247, 247, 247);
            margin-top: 80px;
            width: 90%;
            min-height: 180px;
            display: flex;
            align-items: center;
            justify-content: center;
            position: absolute;
            top: 5%;
        }
        #img_containter>img{
            width: 100%;
            object-fit: cover;
            display: none;
        }
        #chose{
            width: 90%;
            height: 5%;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            background-image: linear-gradient(90deg, 
                #ff5f69 12%, 
                #fc363c 53%, 
                #f80d0f 100%), 
            linear-gradient(
                #ffabb3, 
                #ffabb3);
            background-blend-mode: normal, 
                normal;
            border-radius: 10px;
            position: absolute;
            top: 5%;
        }
    </style>
</head>
<body style="text-align: center;display: flex;justify-content: center;align-items: center;flex-direction: column;">
    <input type="file" accept="image/*" id="pic" style="display: none;">
    <div id="chose" onclick="upLoad()">上传图片</div>
    <div id="img_containter">
        <span id="img_desc">图片显示区</span>
        <img src="" id="img">
    </div>
</body>
<script>
    (function(d,w){
        var reader = new FileReader();
        var file = document.getElementById('pic');
        file.addEventListener('change',(e)=>{
            reader.readAsDataURL(e.target.files[0]);
            reader.onload = ()=>{
                document.getElementById('img').src = reader.result;
                hidden(document.getElementById('img_desc'));
                show(document.getElementById('img'));
            }
        });
        function upLoad (){
            file.click();
        };
        function hidden(node){
            node.style.display = 'none';
        }
        function show(node) {
            node.style.display = 'block';
        }
        w.upLoad = upLoad;
    })(document,window)

</script>
</html>